<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>个人资料--layui后台管理模板 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
	<link rel="stylesheet" href="/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form layui-row" id="userFrm">
	<div class="layui-col-md3 layui-col-xs12 user_right">
		<div class="layui-upload-list">
			<img class="layui-upload-img layui-circle userFaceBtn userAvatar" id="userFace"
				 th:src="@{/file/showImage(filePath=${session.user.imgpath})}">

		</div>
		<button type="button" class="layui-btn layui-btn-primary userFaceBtn"><i class="layui-icon">&#xe67c;</i>
			掐指一算，我要换一个头像了
		</button>
		<p>由于是纯静态页面，所以只能显示一张随机的图片</p>
	</div>
	<div class="layui-col-md6 layui-col-xs12">
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="hidden" name="id" th:value="${session.user.id}">
				<input type="hidden" name="imgpath"  id="imgpath" th:value="${session.user.imgpath}">
				<input type="text"  th:value="${session.user.name}" disabled class="layui-input layui-disabled">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">登录名</label>
			<div class="layui-input-block">
				<input type="text" th:value="${session.user.loginname}" disabled class="layui-input layui-disabled">
			</div>
		</div>

		<div class="layui-form-item" pane="">
			<label class="layui-form-label">性别</label>
			<div class="layui-input-block userSex">
				<input type="radio" name="sex" value="1" title="男">
				<input type="radio" name="sex" value="0" title="女" >

			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">用户地址</label>
			<div class="layui-input-block">
				<input type="text" name="address" th:value="${session.user.address}" placeholder="请输入用户地址"  class="layui-input userEmail">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户备注</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入用户备注" name="remark" th:text="${session.user.remark}" class="layui-textarea myself"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</div>
</form>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" >
	var sex=[[${session.user.sex}]];//0

	var form, $;

	layui.use(['form', 'layer', 'upload', 'laydate'], function () {
		form = layui.form;
		$ = layui.jquery;


		var sexObj=$("input[name='sex']");
		$.each(sexObj,function (i,item) {

			if(sex==item.value){//0==1
				//0==0
				$(item).attr("checked","checked");
				//重新渲染
				form.render();


			}

		})


		var layer = parent.layer === undefined ? layui.layer : top.layer,
				upload = layui.upload,
				laydate = layui.laydate;
		// address = layui.address;

		//上传头像
		upload.render({
			elem: '.userFaceBtn',
			url: '/file/uploadFile',
			method: "post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
			accept: 'images',
			acceptMime: 'image/*',
			field: 'mf',//<input type='file' name='mf'>
			done: function (res, index, upload) {

				//图片的imgpath重新赋值
				$("#imgpath").val(res.data.src);

				$("#userFace").attr("src","/file/showImage?filePath="+res.data.src);

			}
		});

		//提交个人资料
		form.on("submit(changeUser)", function (data) {
			var index = layer.msg('提交中，请稍候', {icon: 16, time: false, shade: 0.8});
			//收集表单数据
			var params = $("#userFrm").serialize();
			// alert(params);
			$.post("/user/changeUser",params,function (res) {
				layer.msg(res.msg);
				layer.close(index);

			});


			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		})


	})
</script>
<script type="text/javascript" src="/js/cacheUserInfo.js"></script>
</body>
</html>